window.onload = function() {
  if (!localStorage.getItem('username') &&  !localStorage.getItem('password')) {
    window.location.href="./html/login.html";
  }
}

const accountName = document.getElementById('accountName');
const outLogin = document.getElementById('outLogin');
const showChartContent = document.querySelector('.showChartContent');
const chartDetailContent = document.querySelector('.chartDetailContent');

const showChartItem1 = document.querySelector('.showChartItem1 > p');
const showChartItem2 = document.querySelector('.showChartItem2 > p');
const showChartItem3 = document.querySelector('.showChartItem3 > p');

showChartItem1.innerHTML = '114514人';
showChartItem2.innerHTML = '62014人';
showChartItem3.innerHTML = '932547￥';

accountName.innerHTML = localStorage.getItem('username');

outLogin.addEventListener('click', () => {
  const msg = "是否退出登录？";
  if (confirm(msg) == true) {
    localStorage.removeItem('username');
    localStorage.removeItem('password');
    
    window.location.href="./html/login.html";
    return true;
  }
})

function lineChart() {
  const myChart = echarts.init(showChartContent);
  let option;

    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 720, 934, 1290, 1030, 1320],
          type: 'line',
          areaStyle: {}
        }
      ]
    };

    option && myChart.setOption(option);
}

function pieChart() {
  const myChart = echarts.init(chartDetailContent);
  let option;

  option = {
    title: {
      text: '当前部门总人数',
      subtext: '人数图表',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '人数',
        type: 'pie',
        radius: '60%',
        data: [
          { value: 10, name: '产品部门' },
          { value: 25, name: '运营部门' },
          { value: 20, name: '市场部门' },
          { value: 40, name: '技术部门' },
          { value: 5, name: ' 财务部门' },
          { value: 10, name: ' 人力资源部门' },
          { value: 2, name: ' 法务部门' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);
}

lineChart();
pieChart();
